<template>
    <div style="background-color: #EBEBEB;min-height:900px">
        <div style="width:100%;background-color: #636363; overflow: hidden">
            <span class="demonstration" style="float:left;padding-top:10px;color:white;margin-left:1%">
                后台管理
            </span>
            <span class="demonstration" style="float:right;padding:5px;color:white;margin-right:2%;width:30px;height:50px">
                <div class="user-img-c" style="width:10%;height:18%">
                 <img :src="imgUrl">
            </div>
            </span>
            <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    admin<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" @click.native="handleClick">
                    <el-dropdown-item index="1" @click.native="handleClick">个人信息</el-dropdown-item>
                    <el-dropdown-item index="2" @click.native="handleClick" >退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
            <span class="demonstration" style="float:right;padding:0px;color:white;margin-right:2%;width:30px;height:50px">
                <div class="user-img-c" style="width:10%;height:18%">
                 <img :src="imgUrl">
            </div>
            </span>
        </div>

        <div style="margin-top:5px">
            <el-row :gutter="10">
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                    <div>
                        <el-menu default-active="1" class="el-menu-vertical-demo" style="min-height:900px" @select="handleSelect">
                            <el-menu-item index="1"><i class="el-icon-menu"></i>所有用户信息</el-menu-item>
                            <el-menu-item index="2"><i class="el-icon-message"></i>待审核信息</el-menu-item>
                            <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <el-col :xs="20" :sm="20" :md="20" :lg="20">


                    <div style="margin-top:10px">
                        <router-view></router-view>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            return {
                searchCriteria: '',
                breadcrumbItems: ['导航一'],
                imgUrl:require("../../assets/image/bg00.jpg")
            }
        },

        methods:{
            handleIconClick(ev) {
                console.log(ev);
            },

            handleSelect(key, keyPath){
                switch(key){
                    case '1':
                        this.$router.push('/Page1');
                        this.breadcrumbItems  = ['所有用户信息']
                        break;
                    case '2':
                        this.$router.push('/Page2')
                        this.breadcrumbItems  = ['消息提醒']
                        break;
                    case '3':
                        this.$router.push('/Page3')
                        this.breadcrumbItems  = ['导航三']
                        break;
                }
            },
            handleClick(key, keyPath){
                this.$router.push('/login')
            },

        },
    }
</script>
